<template>
  <div class="block">
    <div style="text-align: center;">
      <!-- 头像 -->
      <el-avatar :size="180" :src="user.headImg"></el-avatar>
    </div>

    <!-- 信息列表 -->
    <el-descriptions class="margin-top" title="个人信息" :column="2" size="medium" border style="color: rgb(96,98,102);margin-top: 40px;">
      <template slot="extra">
        <!-- <el-popover
          placement="bottom"
          title="新昵称"
          width="300"
          trigger="click"> -->
          <!-- 回复按钮 -->
          <!-- <el-button type="text" slot="reference">修改昵称</el-button>
          <el-input v-model="input" placeholder="请输入内容"></el-input> -->
          <!-- <el-input v-model="newNickname" placeholder="输入昵称后回车修改" @keyup.enter.native="chgNickname"></el-input> -->
       <!-- </el-popover> -->
          <el-button type="text" @click="open" >修改昵称</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          昵称
        </template>
        {{user.nickname}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{user.phone}}
      </el-descriptions-item>
      <br>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        成都市 - 蜗牛学苑
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        成都市高新区天府大道北段1480号孵化园5号楼
      </el-descriptions-item>
	  <br/>
	  <el-descriptions-item>
	    <template slot="label">
	      <i class="el-icon-location-outline"></i>
	      性别
	    </template>
	    成都市 - 蜗牛学苑
	  </el-descriptions-item>
	 
    </el-descriptions>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //用户信息
        user:{

        },
        //昵称    应该在用户信息里
        newNickname: "tom"
      }
    },
    methods:{
    open() {
            this.$prompt('请输入新昵称', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /^\w+$/,
              inputErrorMessage: '不能为空',

            }).then(({ value }) => {
              this.$message({
                type: 'success',
                message: '你的昵称是: ' + value,

              });
              this.newNickname = value
              //alert(this.newNickname)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消输入'
              });
            });
          }
          },
    //methods: {
      // chgNickname: function(){
      //   if(this.newNickname.length < 2 || this.newNickname.length > 10){
      //     this.$message.error("昵称长度在2-10个字符，请检查后重试")
      //     return
      //   }

    //     this.$axios.post(
    //       "acct/chgNickname",
    //       this.newNickname,
    //       { headers:{ 'Content-Type':'text/plain' } }
    //       ).then(res => {
    //       if(res.data.status == "SUCCESS"){
    //         // 将本页面保存的user和sessionStorage中的user对象替换为最新的
    //         this.user = res.data.data
    //         sessionStorage.setItem("user", JSON.stringify(this.user))

    //         this.newNickname = ""
    //         this.$message.success("昵称修改成功")
    //       }else{
    //         this.$message.error("修改失败")
    //       }
    //     })
    //   }
    // },

    mounted() {
      //从本地取出user对象
      this.user = JSON.parse(sessionStorage.getItem("user"))
    }
  }
</script>

<style scoped>

</style>
